<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>组件通信</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <greeter></greeter>
        <super-greeter></super-greeter>
    </div>

    <script>
        
        var Greeter = {
            template: `
            <p>
               {{message}}
               <button @click="greet">greet</button>
            </p>`,
            data(){
                return{
                    message: '...'
                }
            },
            methods: {
                greet(){
                    this.message = 'hello'
                }
            }
        };

        var SuperGreeter = {
            mixins: [Greeter],
            template: `
            <p>
               {{message}}
               <button @click="superGreet">supergreet</button>
            </p>`,
            methods: {
                superGreet(){
                    this.message = 'SUPER HELLO!'
                }
            }
        };

        new Vue({
            el: '#app',
            components: {Greeter, SuperGreeter}
        })

    </script>

</body>

</html>